﻿
@{
    ViewData["Title"] = "Rangeslider";
}



<!-- [ Main Content ] start -->
<div class="pcoded-main-container">
    <div class="pcoded-wrapper">
        <div class="pcoded-content">
            <div class="pcoded-inner-content">
                <!-- [ breadcrumb ] start -->
                <div class="page-header">
                    <div class="page-block">
                        <div class="row align-items-center">
                            <div class="col-md-12">
                                <div class="page-header-title">
                                    <h5 class="m-b-10">Range Slider</h5>
                                </div>
                                <ul class="breadcrumb">
                                    <li class="breadcrumb-item"><a href="/Dashboard/@Pages.Dashboard.Value"><i class="feather icon-home"></i></a></li>
                                    <li class="breadcrumb-item"><a href="#!">Advance Components</a></li>
                                    <li class="breadcrumb-item"><a href="#!">Range Slider</a></li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- [ breadcrumb ] end -->
                <div class="main-body">
                    <div class="page-wrapper">
                        <!-- [ Main Content ] start -->
                        <div class="row">
                            <div class="col-sm-12">
                                <div class="alert alert-primary" role="alert">
                                    <p>Use our extra helper file for quick setup Advance Components in your page - <a href="/ElementAdvance/@Pages.AdvancePackage.Value" target="_blank" class="alert-link">CHECKOUT</a></p>
                                    <label class="text-muted">Copy/paste source code in your page in just couples of seconds.</label>
                                </div>
                            </div>
                            <!-- [ rangeslider ] start -->
                            <div class="col-lg-4 col-md-6">
                                <div class="card">
                                    <div class="card-block">
                                        <h6>Basic example with custom formatter and colored selected region via CSS.</h6>
                                        <hr>
                                        <input id="ex1" data-slider-id='ex1Slider' type="text" data-slider-min="0" data-slider-max="20" data-slider-step="1" data-slider-value="14" />
                                    </div>
                                </div>
                            </div>
                            <div class="col-lg-4 col-md-6">
                                <div class="card">
                                    <div class="card-block">
                                        <h6>Range selector, options specified via data attribute.</h6>
                                        <hr> Filter by price interval: <b>€ 10</b>
                                        <input id="ex2" type="text" class="span2" value="" data-slider-min="10" data-slider-max="1000" data-slider-step="5" data-slider-value="[250,450]" /> <b>€ 1000</b>
                                    </div>
                                </div>
                            </div>
                            <div class="col-lg-4 col-md-6">
                                <div class="card">
                                    <div class="card-block">
                                        <h6>Sliders can be enabled and disabled.</h6>
                                        <hr>
                                        <input id="ex7" type="text" data-slider-min="0" data-slider-max="20" data-slider-step="1" data-slider-value="5" data-slider-enabled="false" />
                                        <input id="ex7-enabled" type="checkbox" /> Enabled
                                    </div>
                                </div>
                            </div>
                            <div class="col-lg-4 col-md-6">
                                <div class="card">
                                    <div class="card-block">
                                        <h6>Using events to work with the values and style the selection and handles via CSS. The tooltip is disabled and diferent shapes for the handles.</h6>
                                        <hr>
                                        <p>
                                            <b>R</b>
                                            <input type="text" class="span2" value="" data-slider-min="0" data-slider-max="255" data-slider-step="1" data-slider-value="128" data-slider-id="RC" id="R" data-slider-tooltip="hide" data-slider-handle="square" />
                                        </p>
                                        <p>
                                            <b>G</b>
                                            <input type="text" class="span2" value="" data-slider-min="0" data-slider-max="255" data-slider-step="1" data-slider-value="128" data-slider-id="GC" id="G" data-slider-tooltip="hide" data-slider-handle="round" />
                                        </p>
                                        <p>
                                            <b>B</b>
                                            <input type="text" class="span2" value="" data-slider-min="0" data-slider-max="255" data-slider-step="1" data-slider-value="128" data-slider-id="BC" id="B" data-slider-tooltip="hide" data-slider-handle="triangle" />
                                        </p>
                                        <div id="RGB"></div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-lg-4 col-md-6">
                                <div class="card">
                                    <div class="card-block">
                                        <h6>Vertical Slider with reversed values (largest to smallest).</h6>
                                        <hr>
                                        <input id="ex4" type="text" data-slider-min="-5" data-slider-max="20" data-slider-step="1" data-slider-value="-3" data-slider-orientation="vertical" />
                                    </div>
                                </div>
                            </div>
                            <div class="col-lg-4 col-md-6">
                                <div class="card">
                                    <div class="card-block">
                                        <h6>Unusual tooltip positions</h6>
                                        <hr>
                                        <input id="ex17a" type="text" />
                                        <input id="ex17b" type="text" />
                                    </div>
                                </div>
                            </div>
                            <div class="col-lg-4 col-md-6">
                                <div class="card">
                                    <div class="card-block">
                                        <h6>Destroy instance of slider by calling destroy() method on slider instance via JavaScript.</h6>
                                        <hr>
                                        <input id="ex5" type="text" data-slider-min="-5" data-slider-max="20" data-slider-step="1" data-slider-value="0" />
                                        <button id="destroyEx5Slider" class='btn btn-danger'>Click to Destroy</button>
                                    </div>
                                </div>
                            </div>
                            <div class="col-lg-4 col-md-6">
                                <div class="card">
                                    <div class="card-block">
                                        <h6>Able to bind to 'slide' JQuery event on slider, which is triggered whenever the slider is used.</h6>
                                        <hr>
                                        <input id="ex6" type="text" data-slider-min="-5" data-slider-max="20" data-slider-step="1" data-slider-value="3" />
                                        <span id="ex6CurrentSliderValLabel">Current Slider Value: <span id="ex6SliderVal">3</span></span>
                                    </div>
                                </div>
                            </div>
                            <div class="col-lg-4 col-md-6">
                                <div class="card">
                                    <div class="card-block">
                                        <h6>Tooltip can always be displayed.</h6>
                                        <hr>
                                        <input id="ex8" data-slider-id='ex1Slider' type="text" data-slider-min="0" data-slider-max="20" data-slider-step="1" data-slider-value="14" />
                                    </div>
                                </div>
                            </div>
                            <div class="col-lg-4 col-md-6">
                                <div class="card">
                                    <div class="card-block">
                                        <h6>Precision (number of places after the decimal) can be specified.</h6>
                                        <hr>
                                        <input id="ex9" type="text" />
                                    </div>
                                </div>
                            </div>
                            <div class="col-lg-4 col-md-6">
                                <div class="card">
                                    <div class="card-block">
                                        <h6>Setting custom handlers.</h6>
                                        <hr>
                                        <input id="ex10" type="text" data-slider-handle="custom" />
                                    </div>
                                </div>
                            </div>
                            <div class="col-lg-4 col-md-6">
                                <div class="card">
                                    <div class="card-block">
                                        <h6>Using a custom step interval.</h6>
                                        <hr>
                                        <input id="ex11" type="text" data-slider-handle="custom" />
                                    </div>
                                </div>
                            </div>
                            <div class="col-lg-4 col-md-6">
                                <div class="card">
                                    <div class="card-block">
                                        <h6>Coloring the low and high track segments.</h6>
                                        <hr>
                                        <input id="ex12a" type="text">
                                        <br> Note that there is no low track on the single-value slider. The area to lesser than the value of the handle is the selection.
                                        <br>
                                        <input id="ex12b" type="text">
                                        <br>
                                        <input id="ex12c" type="text">
                                        <br>
                                    </div>
                                </div>
                            </div>
                            <div class="col-lg-4 col-md-6">
                                <div class="card">
                                    <div class="card-block">
                                        <h6>Using tick marks and labels.</h6>
                                        <hr>
                                        <input id="ex13" type="text" data-slider-ticks="[0, 100, 200, 300, 400]" data-slider-ticks-snap-bounds="30" data-slider-ticks-labels='["$0", "$100", "$200", "$300", "$400"]' />
                                    </div>
                                </div>
                            </div>
                            <div class="col-lg-4 col-md-6">
                                <div class="card">
                                    <div class="card-block">
                                        <h6>Using tick marks at specific positions.</h6>
                                        <hr>
                                        <input id="ex14" type="text" data-slider-ticks="[0, 10, 20, 30, 40]" data-slider-ticks-snap-bounds="95" data-slider-ticks-labels='["$0", "$10", "$20", "$30", "$40"]' data-ticks_positions="[0, 30, 60, 70, 90, 100]">
                                    </div>
                                </div>
                            </div>
                            <div class="col-lg-4 col-md-6">
                                <div class="card">
                                    <div class="card-block">
                                        <h6>With a logarithmic scale.</h6>
                                        <hr>
                                        <input id="ex15" type="text" data-slider-min="1000" data-slider-max="10000000" data-slider-step="5" />
                                    </div>
                                </div>
                            </div>
                            <div class="col-lg-4 col-md-6">
                                <div class="card">
                                    <div class="card-block">
                                        <h6>Focus the slider handle after a value change.</h6>
                                        <hr>
                                        <input id="ex16a" type="text" />
                                        <br />
                                        <input id="ex16b" type="text" />
                                        <br />
                                    </div>
                                </div>
                            </div>
                            <div class="col-lg-4 col-md-6">
                                <div class="card">
                                    <div class="card-block">
                                        <h6>Accessibility with ARIA labels</h6>
                                        <hr>
                                        <span id="ex18-label-1" class="hidden">Example slider label</span>
                                        <input id="ex18a" type="text" />
                                        <span id="ex18-label-2a" class="hidden">Example low value</span>
                                        <span id="ex18-label-2b" class="hidden">Example high value</span>
                                        <input id="ex18b" type="text" />
                                    </div>
                                </div>
                            </div>
                            <div class="col-lg-4 col-md-6">
                                <div class="card">
                                    <div class="card-block">
                                        <h6>Auto-Register data-provide="slider" Elements</h6>
                                        <hr>
                                        <span id="ex19-label-1" class="hidden" style="width:100%;float:left;">Example slider label</span>
                                        <input id="ex19" type="text" data-provide="slider" data-slider-ticks="[1, 2, 3]" data-slider-ticks-labels='["short", "medium", "long"]' data-slider-min="1" data-slider-max="3" data-slider-step="1" data-slider-value="3" data-slider-tooltip="hide" />
                                    </div>
                                </div>
                            </div>
                            <div class="col-lg-4 col-md-6">
                                <div class="card">
                                    <div class="card-block">
                                        <h6>Slider-Elements initially hidden</h6>
                                        <hr>
                                        <div class="well" style="display: none">
                                            <span id="ex20-label-1" class="hidden" style="width:100%;float:left;">Example slider label</span>
                                            <input id="ex20" type="text" data-provide="slider" data-slider-ticks="[1, 2, 3]" data-slider-ticks-labels='["short", "medium", "long"]' data-slider-min="1" data-slider-max="3" data-slider-step="1" data-slider-value="3" data-slider-tooltip="hide" />
                                        </div>
                                        <a class="btn btn-primary" href="#!" id="ex20a">Show</a>
                                    </div>
                                </div>
                            </div>
                            <div class="col-lg-4 col-md-6">
                                <div class="card">
                                    <div class="card-block">
                                        <h6>Create an input element wth the data-provide="slider" attribute automatically turns it into a slider. Options can be supplied via data-slider- attributes.</h6>
                                        <hr>
                                        <input id="ex21" type="text" data-provide="slider" data-slider-ticks="[1, 2, 3]" data-slider-ticks-labels='["short", "medium", "long"]' data-slider-min="1" data-slider-max="3" data-slider-step="1" data-slider-value="3" data-slider-tooltip="hide" />
                                    </div>
                                </div>
                            </div>
                            <div class="col-lg-4 col-md-6">
                                <div class="card">
                                    <div class="card-block">
                                        <h6>Highlight ranges on slider with rangeHighlights attribute 14</h6>
                                        <hr>
                                        <input id="ex22" type="text" data-slider-id="slider22" data-slider-min="0" data-slider-max="20" data-slider-step="1" data-slider-value="14" data-slider-rangeHighlights='[{ "start": 2, "end": 5, "class": "category1" },
                                               { "start": 7, "end": 8, "class": "category2" },
                                               { "start": 17, "end": 19 },
                                               { "start": 17, "end": 24 }, //not visible -  out of slider range
                                               { "start": -3, "end": 19 }]' />
                                    </div>
                                </div>
                            </div>
                            <div class="col-lg-4 col-md-6">
                                <div class="card">
                                    <div class="card-block">
                                        <h6>Using tick marks at specific positions..</h6>
                                        <hr>
                                        <input id="ex23" type="text" data-slider-ticks="[0, 1, 2, 3, 4]" data-slider-step="0.01" data-slider-ticks-snap-bounds="200" data-slider-ticks-tooltip="true" data-ticks_positions="[0, 30, 60, 70, 90, 100]">
                                    </div>
                                </div>
                            </div>
                            <div class="col-lg-4 col-md-6">
                                <div class="card">
                                    <div class="card-block">
                                        <h6>rtl mode (auto)</h6>
                                        <hr>
                                        <div class='well' dir="rtl">
                                            <span>-5</span>
                                            <input id="ex24" type="text" data-slider-min="-5" data-slider-max="20" data-slider-step="1" data-slider-value="14" />
                                            <span>20</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!-- [ rangeslider ] end -->
                        </div>
                        <!-- [ Main Content ] end -->
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- [ Main Content ] end -->


@section Styles{
    <!-- rangeslider css -->
    <link rel="stylesheet" href="~/assets/plugins/range-slider/css/bootstrap-slider.min.css">
    <!-- rangeslider-custom css -->
    <link rel="stylesheet" href="~/assets/css/pages/rangeslider.css">
}

@section Scripts{
    <!-- range slider Js -->
    <script src="~/assets/plugins/range-slider/js/bootstrap-slider.min.js"></script>
    <script src="~/assets/js/pages/ac-rangeslider.js"></script>
}

